<template>
	<view class="notice-details">
		<view class="content-info">
			<view class="title">{{detail.title}}</view>
			<!-- #ifdef H5 || APP -->
			<view class="content" v-html="detail.content"></view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<rich-text :nodes="detail.content"></rich-text>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineProps
	} from 'vue';

	defineOptions({
		name: 'gyd-article'
	});

	const state = reactive({});

	const props = defineProps({
		detail: {
			type: Object,
			default: {},
		}
	})

	const {} = toRefs(state);
</script>

<style lang="scss">
	.notice-details {
		padding: 24rpx 24rpx;
		box-sizing: border-box;

		.content-info {
			padding: 20rpx;
			background-color: white;

			.title {
				width: 100%;
				line-height: 80rpx;
				font-size: 36rpx;
				font-weight: 800;
				text-align: center;
			}

			.content {
				width: 100%;
				overflow: hidden;

				img,
				image {
					width: 100%;
				}
			}
		}
	}
</style>